<template>
  <div class="agent_detail">
    <div class="w">
      <div class="container clearfix">
        <!-- 个人信息 -->
        <div class="content fl">
          <div class="info clearfix">
            <div class="img-box">
              <img :src="initData.info.avatar" alt="">
            </div>
            <div class="detail fl">
              <p class="name">{{initData.info.agentName}}<span>{{initData.info.position}}</span></p>
              <p class="branch">所在分店: {{initData.info.branch}}</p>
              <p class="area">服务片区: {{initData.info.serveArea}}</p>
              <p>
                <el-tag v-if="initData.info.tag1">成交达人</el-tag>
                <el-tag v-if="initData.info.tag2">超赞经纪人</el-tag>
              </p>
              <p>
                <span class="tag3" v-if="initData.info.tag3">{{initData.info.tag3}}</span>
              </p>
              <!-- <p>
                <div></div>
              </p> -->
            </div>
            <div class="phone fr">
              <i class="el-icon-phone"></i>{{initData.info.phone}}
            </div>
          </div>
          <!-- 好评 -->
          <div class="hp clearfix">
            <div class="title">好评率</div>
            <div class="rate fl">
              <div class="num">{{initData.info.hp}}<span>%</span></div>
              <div>好评率</div>
            </div>
            <ul class="rate-list fl">
              <li class="clearfix" @mouseover="activeRate = 1" @mouseleave="activeRate = 0">
                <span>好评</span>
                <el-progress :percentage="initData.info.hp"></el-progress>
              </li>
              <li class="clearfix" @mouseover="activeRate = 2" @mouseleave="activeRate = 0">
                <span>中评</span>
                <el-progress :percentage="initData.info.zp" color="#e6a23c"></el-progress>
              </li>
              <li class="clearfix" @mouseover="activeRate = 3" @mouseleave="activeRate = 0">
                <span>差评</span>
                <el-progress :percentage="initData.info.cp" color="#f56c6c"></el-progress>
              </li>
            </ul>
            <div class="fr right_rate">
              <div class="hover_con" v-show="activeRate == 1">
                根据该经纪人所有评价的综合评分计算得出，代表该经纪人能为客户带来比较优质的服务体验。
              </div>
              <div class="hover_con" v-show="activeRate == 2">
                根据该经纪人所有评价的综合评分计算得出，代表该经纪人基本能满足客户的需求。
              </div>
              <div class="hover_con" v-show="activeRate == 3" style="padding: 13px 10px;">
                根据该经纪人所有评价的综合评分计算得出，代表该经纪人可能因各种情况造成客户不便或者误会，产生不佳的体验。
              </div>
              <div class="hover_con" v-show="activeRate == 0">好评率是根据该经纪人所有评价记录的综合评分计算得出</div>
            </div>
          </div>

          <!-- 带看小区 -->
          <div class="dkxq">
            <div class="title">带看小区</div>
            <el-table :data="initData.estateData">
              <el-table-column align="center" header-align='center' type="index" label="排行" width="50">
              </el-table-column>
              <el-table-column align="center" header-align='center' prop="name" label="小区名称">
              </el-table-column>
              <el-table-column align="center" header-align='center' prop="area" label="所属区域">
              </el-table-column>
              <el-table-column align="center" header-align='center' prop="area2" label="所属商圈">
              </el-table-column>
              <el-table-column align="center" header-align='center' prop="sum" label="带看量">
              </el-table-column>
            </el-table>
          </div>

        </div>
        <!-- 右侧信息 -->
        <div class="agent-recommend fr">
          <div class="recommend-wrap re">
            <h2 class="common_tit mt20 mb5">认证信息</h2>
            <div class="authentication work">
              <img class="icon" src="@/assets/images/zyrz.png" draggable="false">
              <h2>执业认证</h2>
              <p>获得行业协会执业认证</p>
            </div>
            <div class="authentication identity">
              <img class="icon" src="@/assets/images/sfrz.png" draggable="false">
              <h2>身份认证</h2>
              <p>个人信息经公安机关核实</p>
            </div>
            <div class="authentication posts">
              <img class="icon" src="@/assets/images/pxrz.png" draggable="false">
              <h2>上岗培训</h2>
              <p>上岗资格认证考试合格</p>
            </div>
          </div>
          <div>
            <div class="pl15 pr15">
              <h2 class="common_tit mt20 mb5">综合评分</h2>
              <div class="overallscore clearfix">
                <div class="left fl">
                  <strong>5</strong>
                  <p>综合评分</p>
                </div>
                <div class="right fr">
                  <p class="score_star clearfix">
                    <span>服务态度:</span>
                    <el-rate class="fl" v-model="initData.info.serve" disabled text-color="#ff9900" score-template="{value}">
                    </el-rate>
                  </p>
                  <p class="score_star clearfix">
                    <span>熟悉房源:</span>
                    <el-rate class="fl" v-model="initData.info.house" disabled text-color="#ff9900" score-template="{value}">
                    </el-rate>
                  </p>
                  <p class="score_star">
                    <span>专业能力:</span>
                    <el-rate class="fl" v-model="initData.info.major" disabled text-color="#ff9900" score-template="{value}">
                    </el-rate>
                  </p>

                </div>

              </div>
              <div class="zxdk">
                <h2 class="common_tit">最新带看</h2>

                <ul>
                  <li v-for="(item, index) in initData.see_house" :key="index">
                    <div class="new_take">
                      <div class="see_date">
                        <span class="new_icon" v-if="index == 0">新</span>
                        {{item.date}}
                      </div>
                      <p class="see_detail">带客户看二手房&nbsp;
                        <a href="javascript:;" @click="goPage('estate_detail', item.estateId)">{{item.estate}}</a>&nbsp;
                        {{item.kind}}&nbsp;
                        {{item.builtArea}}平&nbsp;
                        等{{item.num}}套
                      </p>
                    </div>
                  </li>
                </ul>

              </div>

            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'agent_detail',
  data() {
    return {
      initData: {
        info: {
          id: "001",
          name: "陈柱华",
          phone: "400 0755 396 转 00252",
          avatar: require("@/assets/images/personal.jpg"),
          branch: '17web3',
          serveArea: '石碁/番禺广场/市桥东',
          hisService: 351,
          position: '置业顾问',
          tag1: '成交达人',
          tag2: '超赞经纪人',
          hp: 100,// 好评
          zp: 0,// 中评
          cp: 0,// 差评
          serve: 5,// 服务态度
          house: 5,// 熟悉房源
          major: 5,// 专业能力
        },
        see_house: [
          {
            date: '2021-04-12',
            estate: '基盛水韵蓝湾',
            estateId: 1,
            kind: '2室2厅',
            builtArea: 78,
            num: 3
          },
          {
            date: '2021-04-12',
            estate: '美心翠拥华庭二期',
            estateId: 1,
            kind: '3室2厅',
            builtArea: 87,
            num: 3
          },
          {
            date: '2021-04-12',
            estate: '东怡新区东雅园',
            estateId: 1,
            kind: '3室2厅',
            builtArea: 100,
            num: 3
          },
        ],
        estateData: [
          {
            name: '基盛水韵蓝湾',
            area: '番禺',
            area2: '市桥南',
            sum: 470,
          },
          {
            name: '东怡新区东雅园',
            area: '番禺',
            area2: '番禺广场',
            sum: 341,
          },
          {
            name: '东华花园',
            area: '番禺',
            area2: '番禺广场',
            sum: 304,
          },
        ]
      },
      activeRate: 0,

    }
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      this.axios({
        method: 'get',
        url: this.baseUrl + '/getAgentdetail',
        params: {id: this.$route.params.id}
      }).then(res => {
        console.log('res==>', res)
        if (res.data.code == 200) {
          this.initData.info = res.data.data[0]
        }
      }).catch(err => {
        console.log('err==>', err)
        this.$message.error(res.data.msg)
      })
    },
    // 跳转
    goPage(n, i) {
      let routeUrl = this.$router.resolve(`/${n}?id=${i}`);
      window.open(routeUrl.href, "_blank");
    },
  }
}
</script>

<style lang="less" scoped>
@theme: #00b16a;
.agent_detail {
  background-color: #f1f1f1;
  // height: 1000px;
  .container {
    padding-top: 50px;
    padding-bottom: 50px;

    .content {
      background-color: #fff;
      // height: 500px;
      width: 820px;
      padding: 20px 40px;
      .info {
        position: relative;
        margin-bottom: 20px;
        .img-box {
          width: 137px;
          height: 185px;
          position: absolute;
          top: -50px;
          // left: 40px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .detail {
          margin-left: 157px;
          width: 250px;
          > p {
            margin-bottom: 10px;
          }
          .name {
            color: @theme;
            font-weight: bold;
            font-size: 24px;
            > span {
              display: inline-block;
              color: #000;
              font-size: 12px;
              font-weight: 400;
              width: 59px;
              height: 20px;
              line-height: 20px;
              background: #f0f0f0;
              text-align: center;
              margin-left: 10px;
            }
          }
          .el-tag {
            margin-right: 10px;
          }
          .tag3 {
            display: inline-block;
            height: 22px;
            background-color: #f0f2f7;
            border-radius: 10px;
            margin-left: 5px;
            color: @theme;
            font-size: 12px;
            text-align: center;
            line-height: 22px;
            padding: 0 4px;
          }
        }
        .phone {
          font-size: 30px;
          color: @theme;
          margin-top: 20px;
        }
      }
      .hp {
        margin-bottom: 20px;
        .title {
          padding-left: 20px;
          font-size: 20px;
          height: 20px;
          line-height: 1;
          border-left: 2px solid @theme;
          margin-bottom: 20px;
        }
        .rate {
          width: 144px;
          height: 85px;
          text-align: center;
          border-right: 1px solid #ddd;
          margin-right: 20px;
          .num {
            font-size: 50px;
            color: @theme;
            height: 64px;
            span {
              font-size: 16px;
            }
          }
        }
        .rate-list {
          // width: 500px;
          height: 85px;
          li {
            width: 355px;
            height: 25px;
            line-height: 25px;
            margin-bottom: 10px;
            > span {
              float: left;
              font-size: 16px;
              line-height: 1;
            }
            .el-progress {
              float: left;
              width: 300px;
              margin-left: 20px;
            }
          }
        }
        .right_rate {
          width: 285px;
          .hover_con {
            line-height: 20px;
            padding: 23px 10px;
            background: #f9f9f9;
            color: #999;
            font-size: 12px;
          }
        }
      }
      .dkxq {
        .title {
          padding-left: 20px;
          font-size: 20px;
          height: 20px;
          line-height: 1;
          border-left: 2px solid @theme;
          margin-bottom: 20px;
        }
      }
    }

    .agent-recommend {
      width: 230px;
      padding: 20px;
      background-color: #fff;
      .recommend-wrap {
        margin-bottom: 20px;
      }
      .common_tit {
        padding-left: 20px;
        font-size: 20px;
        height: 20px;
        line-height: 1;
        border-left: 2px solid @theme;
        margin-bottom: 10px;
      }
      .authentication {
        padding: 10px 0 10px 0;
        border-bottom: 1px dotted #eaeaea;
        img {
          width: 35px;
          height: 35px;
          float: left;
          margin-left: 10px;
        }
        > h2 {
          color: #464646;
          font-size: 12px;
          margin-left: 55px;
          margin-bottom: 3px;
        }
        > p {
          color: #999;
          font-size: 12px;
          margin-left: 55px;
        }
      }
      .overallscore {
        margin-top: 15px;
        overflow: hidden;
        margin-bottom: 20px;
        .left {
          padding: 15px 0;
          margin-right: 5px;
          text-align: center;
          width: 80px;
          border-right: 1px solid #e9e9e9;
          strong {
            color: @theme;
            font-size: 36px;
          }
          p {
            font-size: 13px;
            color: #999999;
          }
        }
        .right {
          // margin-right: -15px;
          .score_star {
            height: 20px;
            line-height: 20px;
            margin-bottom: 15px;
            > span {
              float: left;
              font-size: 12px;
            }
            /deep/.el-rate__icon {
              margin-right: 0px;
            }
          }
        }
      }
      .zxdk {
        ul > li {
          padding: 20px 0;
          border-bottom: 1px dotted #e4e4e4;
          .see_date {
            font-size: 14px;
            height: 14px;
            line-height: 14px;
            margin-bottom: 5px;
            span.new_icon {
              display: inline-block;
              font-size: 12px;
              height: 14px;
              width: 16px;
              text-align: center;
              line-height: 14px;
              color: #fff;
              background-color: @theme;
              border-radius: 2px;
            }
          }
          p {
            font-size: 14px;
            a {
              color: @theme;
            }
          }
        }
      }
    }
  }
}
</style>